<template>
  <div class="more-features">
    <div class="more-features-edge-center">
      <div class="more-features-edge-center-box" @click="onMoreFeatures"></div>
      <!-- 更多功能 -->
      <div
        ref="moreFeaturesEdgeCenter"
        class="more-features-edge-center-more"
        :class="isMore ? 'more-features-edge-center-more-show' : ''"
        :style="{ backgroundImage: `url(${drawingBoardIcon})` }"
        @mouseleave="onMoreMouseleave"
      >
        <!-- 截图 -->
        <div class="more-screenshotIcon">
          <div class="more-screenshotIcon-box">
            <img
              :src="screenshotIcon"
              :width="20"
              draggable="false"
              @mouseenter="getShortcuts('isScreenshotTip')"
              @mouseleave="isScreenshotTip = false"
              @click="onScreenshot"
            ></img>
            <!-- 截图 -->
            <div v-if="isScreenshotTip" class="more-screenshotIcon-tip">
              <div>{{ $t('moreFeatures.screenshot') }}</div>
              <div v-if="screenshotChortcut">{{ screenshotChortcut }}</div>
            </div>
          </div>
          </div>
        <!-- 录屏 -->
        <div class="more-screenRecorderIcon">
          <div class="more-screenshotIcon-box">
            <img
              :src="screenRecorderIcon"
              :width="20"
              draggable="false"
              @mouseenter="getShortcuts('isScreenRecorderTip')"
              @mouseleave="isScreenRecorderTip = false"
              @click="onScreenRecorder"
            ></img>
            <!-- 录屏 -->
            <div v-if="isScreenRecorderTip" class="more-screenshotIcon-tip">
              <div>{{ $t('moreFeatures.screenRecorder') }}</div>
              <div v-if="screenRecordingChortcut">{{ screenRecordingChortcut }}</div>
            </div>
          </div>
        </div>
        <!-- ai助手 -->
        <div class="more-aiAssistantIcon">
          <div class="more-screenshotIcon-box">
            <img
              :src="isIntranet ? aiAssistantIcon : aiAssistantIcon2"
              :width="20"
              draggable="false"
              @mouseenter="getShortcuts('isAiAssistantTip')"
              @mouseleave="isAiAssistantTip = false"
              @click="openAiChat"
            ></img>
            <div v-if="isAiAssistantTip" class="more-screenshotIcon-tip">
              <div v-if="isIntranet">{{ $t('moreFeatures.QandA') }} {{ chatChortcut ? chatChortcut: ''  }}</div>
              <div v-else>{{ $t('moreFeatures.permission') }}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import ipcMainApi from '@/ipcMainApi'
import { reportEvent } from '@/utils/aegis';

// 图标路径（根据你实际资源路径调整）
const screenshotIcon = ref(new URL('@/assets/image/aiAssistant/screenshot.png', import.meta.url).href)
const screenRecorderIcon = ref(new URL('@/assets/image/aiAssistant/screenRecorder.png', import.meta.url).href)
const aiAssistantIcon = ref(new URL('@/assets/image/aiAssistant/aiAssistant.png', import.meta.url).href)
const aiAssistantIcon2 = ref(new URL('@/assets/image/aiAssistant/aiAssistant2.png', import.meta.url).href)
const drawingBoardIcon = ref(new URL('@/assets/image/aiAssistant/drawingBoard.png', import.meta.url).href)

const isMore = ref(false) // 是否显示更多功能

const isScreenshotTip = ref(false) // 是否显示截图提示
const isScreenRecorderTip = ref(false) // 是否显示录屏提示
const isAiAssistantTip = ref(false) // 是否显示AI问答提示

const isIntranet = ref(false) // 当前网络是否是内网

const onMoreFeatures = () => {
  console.log(55555)
  ipcMainApi.aiAssistantApi.getFocus()
}

// 打开聊天窗口
const openAiChat = () => {
  if (isIntranet.value) {
    ipcMainApi.aiAssistantApi.hideMoreFeatures(300)
    // ipcMainApi.aiAssistantApi.openAiChat()
    ipcMainApi.browserViewApi.showBrowserView()
    initialState()
    // 上报打开ai窗口事件
    reportEvent('openAiChat');
  }
}

// 截图
const onScreenshot = async () => {
  ipcMainApi.aiAssistantApi.hideMoreFeatures(300)
  ipcMainApi.aiAssistantApi.triggerScreenshot()
  initialState()
  // 上报截图事件
  reportEvent('screenshot');
}

// 录屏
const onScreenRecorder = async () => {
  ipcMainApi.aiAssistantApi.hideMoreFeatures(300)
  ipcMainApi.screenRecorderApi.openScreenRecorder()
  initialState()
  // 上报录屏事件
  reportEvent('screenRecording');
}

const screenshotChortcut = ref() // 截图快捷键
const screenRecordingChortcut = ref() // 录屏快捷键
const chatChortcut = ref() // 问答快捷键

const getShortcuts = async (val) => {

  const data = await ipcMainApi.publicApi.getShortcuts()
  screenshotChortcut.value = data?.shortcuts?.screenshotChortcut || ''
  screenRecordingChortcut.value = data?.shortcuts?.screenRecordingChortcut || ''
  chatChortcut.value = data?.shortcuts?.chatChortcut || ''

  if (val === 'isScreenshotTip') {
    isScreenshotTip.value = true
  } else if (val === 'isScreenRecorderTip') {
    isScreenRecorderTip.value = true
  } else if (val === 'isAiAssistantTip') {
    isAiAssistantTip.value = true
  }
}

// 初始化状态
const initialState = () => {
  isScreenshotTip.value = false
  isScreenRecorderTip.value = false
  isAiAssistantTip.value = false

  isMore.value = false
}

// 跟多功能鼠标移出
const onMoreMouseleave = () => {
  // ipcMainApi.aiAssistantApi.hideMoreFeatures(300)
}


const intervalPot = ref() // 定时器id
const moreFeaturesEdgeCenter = ref() // 获取元素

onMounted(async () => {
  window.electron.ipcRenderer.on('show-more-features', async (_event) => { // 窗口显示
    isMore.value = true
    isIntranet.value = await ipcMainApi.publicApi.getIsIntranet()
  })
  window.electron.ipcRenderer.on('hide-more-features', (_event) => { // 窗口隐藏
    isMore.value = false
    isScreenshotTip.value = false
    isScreenRecorderTip.value = false
    isAiAssistantTip.value = false
  })

  intervalPot.value = setInterval(async() => {
    const pot = await ipcMainApi.publicApi.getCursorScreenPoint() // 获取鼠标位置
    const bounds = moreFeaturesEdgeCenter.value.getBoundingClientRect() // 获取元素位置
    const winX = window.screenX + (window.innerWidth - bounds.width) / 2
    const winY = window.screenY + (window.innerHeight - bounds.height) / 2
    const inside = (pot.x >= winX && pot.x <= winX + bounds.width && pot.y >= winY && pot.y <= winY + bounds.height);
    if (!inside && isMore.value) ipcMainApi.aiAssistantApi.hideMoreFeatures(300)
  }, 500)

})
onUnmounted(() => {
  clearInterval(intervalPot.value)
  intervalPot.value = null
})
</script>

<style lang="scss" scoped>
.more-features {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none; /* 不允许鼠标复制 */
  // background-color: red;
  .more-features-edge-center {
    position: relative;
    width: 180px;
    height: 180px;
    overflow: hidden;
    .more-features-edge-center-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      // background: #fff;
      z-index: 200;
      cursor: pointer;
    }
    .more-features-edge-center-more {
      box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
      width: 120px;
      height: 120px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      z-index: 100;
      transition: all 0.3s ease-in-out;
      opacity: 0;
      background-size: auto 130px;
      background-repeat: no-repeat;
      background-position: center;
      &.more-features-edge-center-more-show {
        width: 130px;
        height: 130px;
        opacity: 1;
      }
      >div {
        cursor: pointer;
        position: absolute;
        .more-screenshotIcon-box {
          position: relative;
          .more-screenshotIcon-tip {
            font-size: 12px;
            background: #ccc;
            box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.3);
            border-radius: 5px;
            line-height: 20px;
            color: #000;
            padding: 2px 6px;
            white-space: nowrap;
            position: absolute;
          }
        }
      }
      .more-screenshotIcon {
        top: 30px;
        left: 14px;
        .more-screenshotIcon-box {
          .more-screenshotIcon-tip {
            left: 50%;
            transform: translateX(-50%);
            bottom: 30px;
          }
        }
      }
      .more-screenRecorderIcon {
        top: 30px;
        right: 14px;
        .more-screenshotIcon-box {
          .more-screenshotIcon-tip {
            left: 50%;
            transform: translateX(-50%);
            bottom: 30px;
          }
        }
      }
      .more-aiAssistantIcon {
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        .more-screenshotIcon-box {
          .more-screenshotIcon-tip {
            // left: 25px;
            // top: 0px;
            left: 50%;
            transform: translateX(-50%);
            top: 25px;
          }
        }
      }
    }
  }
}
.more-screenshotIcon-tip-disabled {
  font-size: 12px;
  background: #ccc;
  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.3);
  border-radius: 5px;
  text-align: center;
  line-height: 20px;
  position: absolute;
  color: #000;
  position: fixed;
  z-index: 400;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  padding: 2px 6px;
  white-space: nowrap;
}
</style>
